<template>
    <div class="inner-center">
        <ul class="tabs">
            <li
                v-for="(item , index) in tabsList"
                :key="index"
                :class="[item.key, item.key === currentTab ? 'active' : '']"
                @click="switchTabs(item)"
            >
                <a href="javascript:void(0);">{{ item.name }}</a>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "FooterTabs",
    props: {
        currentTab: {
            type: String,
            required: true
        },
        tabsList: {
            type: Array,
            required: true
        }
    },
    methods: {
        // 切换tabs
        switchTabs: function (tab) {
            // 操作的时候必须是$parent
            this.$parent.currentTab = tab.key;
        }
    }
}
</script>

<style scoped>

</style>
